//==渲染函数
function render(data) {
    let str = ``
    str = data.list.map((item, index) => {
        return `<tr>
                        <td>${item.id}</td>
                        <td>${item.encode}</td>
                        <td>${item.name}</td>
                        <td>${item.rid}</td>
                        <td>${item.isadmin ? `<button>正常</button>` : `<button class="active">异常</button>`}</td>
                        <td>
                            <span class="iconfont icon-bianji"></span>
                            <span class="iconfont icon-shanchu "data-id="${item.id}"></span>
                        </td>
                    </tr>`
    }).join('')
    document.querySelector('tbody').innerHTML = str;
}
//axios全局设置 请求拦截器
axios.interceptors.request.use(
    (config) => {  //这个回调函数 在每次发请求到服务器端之前 都会调用执行
        //设置请求头参数
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token');
        return config;
    },
    (error) => {
        return Promise.reject(error)
    }
)

//axios全局设置 响应拦截器
axios.interceptors.response.use(
    (res) => {  //这个回调函数 在每次请求从服务器端返回到浏览器之前 都会调用执行
        return res;
    },
    (error) => { //每次请求发生错误, 都会调用执行

        if (error.response.status == 401) {
            //alert('登陆过期!需要重新登录');
            localStorage.removeItem('token');
            location.href = './login.html';

        } else if (error.response.status == 404) {
            alert('访问路径有误!');
        } else if (error.response.status == 500) {
            alert('服务器内部错误!');
        }

        return Promise.reject(error)
    }
)


//===============================================功能区
//获取上一页，下一页按钮
const buts = document.querySelectorAll('.box main .bottom button')
// 设置初始请求参数
let page = 0;
let count = 5;
let datalength = 0
//======给按钮绑定点击事件，发送ajax请求，传参数
buts[0].onclick = () => {
    page <= 1 ? page = 1 : page--
    axios.get('/user/list', { params: { page: page, count: count } }).then((res) => {
        render(res.data)
        datalength = res.data.length
        document.querySelector('.box main .bottom .length').innerText = res.data.length
        document.querySelector('.box main .bottom .page').innerText = page
    })
}
buts[1].onclick = () => {

    if (datalength / count <= page && page != 0) { return } page++
    axios.get('/user/list', { params: { page: page, count: count } }).then((res) => {
        render(res.data)
        document.querySelector('.box main .bottom .page').innerText = page
    })
}



//========================搜索按钮功能
// 获取搜索按钮
const chazhaoBtn = document.querySelector('.box main .chazhao')
// 获取输入框按钮
const inputEle = document.querySelector(' .box main .inp input')
//给button按钮设置点击事件，发送请求，获取数据
chazhaoBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data)
    })
}



//========================删除按钮功能
let table = document.querySelector('table')
//事件委托
table.onclick = (e) => {
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {

        axios.post('/user/delete', { id: e.target.dataset.id }).then((res) => {
            render(res.data)
        })
    }
}

//=====================新增数据功能
// 获取标签，和新增的数据标签
let newEle = document.querySelector('#but')
let newdata = document.querySelector('.new')
let newdatabut = document.querySelector('.new button')
let datainput = document.querySelectorAll('.new .line input')
// 点击事件，让新增窗口打开
newEle.onclick = () => {
    newdata.style.display = 'block'
}
// 输入完新增数据，点击确认，，发送请求，新增
newdatabut.onclick = () => {
    newdata.style.display = 'none'
    axios.post('/user/new', { name: datainput[0].value, id: datainput[1].value }).then((res) => {
        alert(res.data.msg)
        //新增后，重新发送请求，获取最新数据，渲染页面
        page = 1
        axios.get('/user/list', { params: { page: page, count: count } }).then((res) => {
            render(res.data)
            datalength = res.data.length
            document.querySelector('.box main .bottom .length').innerText = res.data.length
            document.querySelector('.box main .bottom .page').innerText = page
        })
    })
}
